<template>
    <div class="systemsetting">
        <page-title>系统设置</page-title>
        
        <div class="content-box">
            <el-tabs type="card">
              <!-- 用户服务 -->
              <el-tab-pane label="用户意见">
                  <div class="filter-box">
                      <el-row>
                        <el-col :span="7">
                            <span class="item-name">意见关键词:</span>
                            <el-input v-model="params.search.content" placeholder="意见关键词"></el-input>
                        </el-col>
                        <el-col :span="7">
                            <span class="item-name">意见状态:</span>
                            <el-select v-model="params.search.status" placeholder="请选择">
                                <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="7">
                            <span class="item-name">反馈时间:</span>
                            <el-date-picker
                              v-model="params.search.create_time"
                              type="date"
                              value-format="yyyy-MM-dd"
                              format="yyyy / MM / dd"
                              placeholder="选择日期">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="3">
                            <el-button @click="fetchListData" type="primary">查询结果</el-button>
                        </el-col>
                      </el-row>
                  </div>
                  <el-table
                      :data="dataList"
                      id="out-table"
                      ref="multipleTable"
                      border
                      style="width: 100%"
                      @selection-change="handleSelectionChange">
                      <el-table-column
                        type="selection"
                        align="center"
                        width="70">
                      </el-table-column>
                      <el-table-column
                        prop="create_time"
                        align="center"
                        label="提交时间"
                        width="165">
                      </el-table-column>
                      <el-table-column
                        prop="content"
                        align="center"
                        show-overflow-tooltip
                        label="意见内容">
                      </el-table-column>
                      <el-table-column
                        prop="users.user_name"
                        align="center"
                        label="反馈用户昵称"
                        width="150">
                      </el-table-column>
                      <el-table-column
                        align="center"
                        label="意见状态"
                        width="120">
                        <template slot-scope="scope">
                            <span :class="{'green': scope.row.status==0}">{{scope.row.status | status}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column 
                        label="操作" 
                        align="center"
                        width="200"
                        show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-button
                                  type="text"
                                  size="small"
                                  @click="open(scope.row.content)">查看</el-button>
                                <el-button 
                                  type="text" 
                                  size="small"
                                  v-if="scope.row.status==1"
                                  @click="consult(scope.row.id)">查阅</el-button>
                                <el-button 
                                  type="text"
                                  size="small"
                                  @click="removeSuggest(scope.row.id)">删除</el-button>
                            </template>
                      </el-table-column>
                  </el-table>
                  <div class="footer-box">
                      <el-row>
                          <el-col :span="8">
                              <div class="multiple-box">
                                  <el-checkbox 
                                    @change="allChoosed"
                                    v-model="allStatus">全选</el-checkbox>
                                  <el-select v-model="value2" placeholder="请选择">
                                      <el-option
                                        v-for="item in options2"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                      </el-option>
                                  </el-select>
                                  <el-button 
                                    style="margin-left: 20px;" 
                                    @click="multipleOperate">确定</el-button>
                              </div>
                          </el-col>
                          <el-col :span="16">
                              <div class="pagination-box">
                                  <el-pagination
                                      layout="prev, pager, next"
                                      :page-size="params.limit"
                                      @current-change="handleCurrentChange"
                                      :total="total">
                                  </el-pagination>
                              </div>
                          </el-col>
                      </el-row>
                  </div>
              </el-tab-pane>
              <el-tab-pane label="banner设置">
                <div class="banner-setting">
                    <div class="index-banner upload-item">
                        <div class="banner-img-box">
                          <div class="banner-img" 
                               v-for="(item, index) in bannerImgArr"
                               @click="triigerFile(index)"
                               :style="'background-image:url('+img_host+item+')'">
                               <span @click.stop="deleteImg(index)">×</span>
                          </div>
                        </div>
                        <el-button 
                          type="primary"
                          id="doctorAuditing">上传banner图
                          <input type="file" 
                                 name="file"
                                 id="filebtn"
                                 multiple
                                 ref="triigerbtn"
                                 @change='addImgEvent'
                                 accept="image/png, image/jpeg, image/jpg">
                        </el-button>
                        <span class="upload-text">按住ctrl可同时批量选择多张图片上传，最多可以上传5张图片，点击图片修改该图片</span>
                    </div>
                    <div class="btn-box">
                        <el-button @click="submit">提 交</el-button>
                    </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="升级提示语">
                <div class="banner-setting">
                    <div class="upgrade">
                        <el-input v-model="slogan"></el-input>
                        <el-button @click="changeSlogan" type="primary" style="margin-left: 10px;">设置</el-button>
                    </div>
                </div>
              </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import * as api from '../../api/api'
import { Message } from 'element-ui'

export default {
    name: 'systemsetting',
    data () {
        return {
            //意见状态
            options: [
                {value: '', label: '全部'}, 
                {value: '0', label: '已查阅'}, 
                {value: '1', label: '未查阅'}
            ],
            //批量操作
            options2: [
                {value: '0', label: '批量删除'}, 
                {value: '2', label: '批量查阅'}
            ],
            value2: '0',  //批量操作状态
            dataList: [],  //列表 
            img_host: '',  //图片域名
            params: {
              "model": "Suggestions",
              "offset": 0,
              "limit": 10,
              "with":{
                0: "users"
              },
              "orderBy":"create_time desc",
              "condition": {
                "is_delete": 0
              },
              "search": {
                'content': '',
                'status': '',
                'create_time': ''
              }
            },
            //数据总条数
            total: 0,
            //多选
            multipleSelection: [],
            allStatus: false,
            bannerImgArr: [],
            modifyImgIndex: '',  //要修改的图序号
            slogan: '',   //宣传语
        }
    },
    computed: {
      multipleId(){
        var that = this;
        return that.multipleSelection.map(function (ele) {
          return ele.id
        })
      }
    },
    created() { 
        var that = this;
        that.img_host = 'http://renqing123.oss-cn-shenzhen.aliyuncs.com/';
        that.fetchListData();
        that.fetchSlogan();
        that.fetchBanner();
    },
    methods: {
        // 请求列表
        fetchListData(){
            var that = this;
            api.getDateList(that.params).then( res => {
                if (res.data.code == 200) {
                    that.total = res.data.data.count - 0;
                    that.dataList = res.data.data.data; 
                }
            });
        },
        // 点击页码
        handleCurrentChange(val) {
            var that = this;
            that.params.offset = (val - 1);
            that.fetchListData();
        },
        //查阅意见
        consult(id){
          var that = this;
          api.createData({
            "model": "Suggestions",
            "data":{
              "status":0   
            },
            "update_condition": {
              "id": id
            }
          }).then(res => {
            if (res.data.code == 200) {
              Message({
                  message: '已查阅',
                  type: 'success',
                  duration: 1000
              });
              that.fetchListData();
            }
          })
        },
        //删除意见
        removeSuggest(id){
          var that = this;
          api.createData({
            "model": "Suggestions",
            "data":{
              "is_delete": "1"
            },
            "update_condition": {
              "id": id
            }
          }).then(res => {
            if (res.data.code == 200) {
              Message({
                  message: '删除成功',
                  type: 'success',
                  duration: 1000
              });
              that.fetchListData();
            }
          })
        },
        //多选
        handleSelectionChange(val){
          this.multipleSelection = val;
        },
        //全选
        allChoosed(val){
          var that = this;
          that.$refs.multipleTable.toggleAllSelection();
        },
        //批量操作
        multipleOperate(){
          var that = this;
          var mulType = that.value2
          //批量删除
          if (mulType == 0) {
            api.createBatchData({
              "model": "Suggestions",
              "update_data":{
                "is_delete": "1"
              },
              "condition": {
                "id": that.multipleId
              }
            }).then(res => {
              if (res.data.code == 200) {
                Message({
                    message: '删除成功',
                    type: 'success',
                    duration: 1000
                });
                that.fetchListData();
              }
            })
          } else if (mulType == 2) { //批量查阅
            api.createBatchData({
              "model": "Suggestions",
              "update_data":{
                "status": 0   
              },
              "condition": {
                "id": that.multipleId
              }
            }).then(res => {
              if (res.data.code == 200) {
                Message({
                    message: '已查阅',
                    type: 'success',
                    duration: 1000
                });
                that.fetchListData();
              }
            })
          }
          that.allStatus = false;
        },
        
       // 查看
       open(content) {
         this.$alert(content, '意见内容', {
           confirmButtonText: '确定'
         });
       },
       //删除图片
       deleteImg(index){
        var that = this;
        that.bannerImgArr.splice(index, 1);
       },
       //选择图片
       addImgEvent(event){
           var that = this;
           var picNum = that.bannerImgArr.length;
           var uploadNum = event.target.files.length;
           if (picNum + uploadNum > 5){
              Message({
                showClose: true,
                type: 'error',
                message: '图片上传张数不能超过5张'
              }); 
              document.getElementById('filebtn').value = '';
              return false;
           };
           var imgs = event.target.files;
           var successNum = 0;
           for (var i=0; i<imgs.length; i++) {
             var size = imgs[i].size/1024;
            //  if(size>500){
            //      Message({
            //        showClose: true,
            //        type: 'error',
            //        message: '图片大小不能大于500KB'
            //      }); 
            //      continue; 
            //  };
             var formdata = new FormData();
             formdata.append('file', imgs[i]);
             api.uploadFile(formdata).then(res => {
                 if (res.data.code == 200) {
                     
                     if (that.modifyImgIndex != '') {
                      that.bannerImgArr.splice(that.modifyImgIndex, 1, res.data.data);
                     } else {
                      that.bannerImgArr.push(res.data.data);
                     }
                     successNum++;
                     if (successNum == uploadNum) {
                      Message({
                          message: '图片上传完成',
                          type: 'success'
                      });
                      that.modifyImgIndex = '';
                     }
                 }
             });
           }
       },
      //获取banner图
      fetchBanner(){
        var that = this;
        api.getDataDetail({
          "model": "Banners",
          "limit":10,
          "offset":0,
          "orderBy":"create_time desc"
        }).then(res => {
          if (res.data.code == 200) {
            that.bannerImgArr = res.data.data.banners.split(',');
          }
        })
       },
       //获取宣传语
       fetchSlogan(){
         var that = this;
         api.getDataDetail({
           "model": "Cues",
           "limit":10,
           "offset":0,
           "orderBy":"create_time desc"
         }).then(res => {
           if (res.data.code == 200) {
             that.slogan = res.data.data.content;
           }
         })
       },
       //改变宣传语
       changeSlogan(){
         var that = this;
         var content = that.slogan;
         api.createData({
           "model": "Cues",
           "data":{content},
           "update_condition":{id:1}
         }).then(res => {
              if (res.data.code == 200) {
                Message({
                    message: '修改成功',
                    type: 'success',
                    duration: 1000
                });
              }
         })
       },
       //点击图片修改该图片
       triigerFile(index){
          var that = this;
          that.modifyImgIndex = index;
          that.$refs.triigerbtn.click();
       },
       //提交banner图片
       submit(){
         var that = this;
         var banners = that.bannerImgArr.toString();
         api.createData({
           "model": "Banners",
           "data": {banners},
           "update_condition":{id:1}
         }).then(res => {
           if (res.data.code == 200) {
             Message({
                 message: '提交成功',
                 type: 'success',
                 duration: 1000
             });
           }
         })
       }
    },
    components: {
        
    },
    filters: {
      status(val){
        if (val == 0) {
          return '已查阅';
        } else {
          return '未查阅';
        }
      }
    }
}
</script>
<style>
    .filter-box input.el-input__inner, .filter-box .el-input{
        width: 170px;
    }
    .multiple-box input.el-input__inner, .multiple-box .el-input {
        width: 120px;
        margin-left: 10px;
    }
    .systemsetting .el-tabs__header {
        margin: 0;
    }
    .upgrade .el-input {
        width: 470px;
    }
</style>
<style scoped lang="scss">
    .systemsetting {
        .green {
          color: green;
        }
        .output-excel {
          position: absolute;
          right:20px;
          top:56px;
          z-index: 10;
        }
        #doctorAuditing {
          position: relative;
          input {
            opacity: 0;
            width:100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
          }
        }
        .banner-img-box {
          display: flex;
          margin-bottom: 30px;
          .banner-img {
            width: 130px;
            height: 130px;
            border: 1px dashed #cccccc;
            margin-right: 20px;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            position: relative;
            span {
              width:20px;
              height: 20px;
              background: rgba(0,0,0,.5);
              color: #ffffff;
              line-height: 20px;
              text-align: center;
              font-size: 18px;
              position: absolute;
              top:-10px;
              right:-10px;
              border-radius: 50%;
              cursor: pointer;
              display: none;
            }
          }
          .banner-img:hover>span {
            display: block;
          }
        }
        background: #ffffff;
        min-height: 100%;
        position: relative;
        box-sizing:border-box;
        color: #666666;
        font-size: 14px;
        .content-box {
            padding: 20px;
            .filter-box {
                padding: 30px 0;
                border-left: 1px solid #e4e7ed;
                border-right: 1px solid #e4e7ed;
                .item-name {
                    padding-left: 30px;
                    padding-right: 10px;
                }
            }
            .operate{
                width:100%;
                height: 100%;
                text-align: center;
                span {
                    color: #1ABC9C;
                    margin: 0 5px;
                }
            }
            .footer-box {
                height: 50px;
                padding-top: 20px;
                .multiple-box {
                    height: 50px;
                    line-height: 50px;
                    padding-left: 19px;
                }
                .pagination-box {
                    height: 50px;
                    line-height: 50px;
                    background: #ffffff;
                    display: flex;
                    justify-content: center;
                    align-items:center;
                    padding-top: 25px;
                }
            }
            .banner-setting {
                position: relative;
                width: 100%;
                background: #ffffff;
                border: 1px solid #e4e7ed;
                border-top: none;
                padding: 20px;
                .upload-item {
                    padding-top:45px;
                    padding-bottom:100px;
                    .upload-text {
                        font-size: 12px;
                        color: #999999;
                        margin-left: 30px;
                    }
                }
                .btn-box {
                    text-align: center;
                }
            }
        }
    }
</style>
